import React, { useState } from 'react'
import '../css/Jly_qryc.css'
import {useNavigate} from "react-router-dom"
import { Checkbox, Button } from 'react-vant';
export default function Jly_qryc() {
    const navigate = useNavigate()
    const [cate, setCate] = useState([
        {
            id: 1,
            name: '出租车',
            desc: '计价器计价'
        }, {
            id: 2,
            name: '经济型',
            desc: '16元起'
        }, {
            id: 3,
            name: '舒适型',
            desc: '33元起'
        }, {
            id: 4,
            name: '商务型',
            desc: '53元起'
        }, {
            id: 5,
            name: '豪华型',
            desc: '61元起'
        },
    ])

    const [data, setData] = useState([
        {
            id: 1,
            name: '香蕉专车',
            price: 18,
            img: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.PuTJoBNgdCLbEKbMHaB9lAHaF7&w=279&h=223&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
        }, {
            id: 2,
            name: '扇骨出行',
            price: 20,
            img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.jkH1pZBRb1ZpnSFFVRrz5gHaHa?w=208&h=208&c=7&r=0&o=5&pid=1.7'
        }, {
            id: 3,
            name: '石榴出行',
            price: 14,
            img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.qzHcAyoQnmeJc-Juy7yD_wHaHa?w=199&h=199&c=7&r=0&o=5&pid=1.7'
        }
    ])

    return (
        <div className='Jly_qryc_main animate__animated animate__bounceInUp'>
            <div className='Jly_qryc_cate'>
            {/* 测试 */}
                {
                    cate.map(item => (
                        <div key={item.id} style={{ textAlign: 'center' }}>
                            <h6>{item.name}</h6>
                            <p>{item.desc}</p>
                        </div>
                    ))
                }
            </div>
            <div className='Jly_qryc_list'>
                {
                    data.map(item => (
                        <div key={item.id} className='Data_item'>
                            <img src={item.img} alt="" />
                            <div className='Data_item_title'>
                                <b>{item.name}</b>
                                <div>
                                    <div>隐私保护</div>
                                    <div>测温消毒</div>
                                </div>
                            </div>
                            <div className='Data_item_price'>
                                <p>预估<b>{item.price}</b>元</p>
                                <p>优惠以减<span style={{ color: 'orangered' }}>14</span>元</p>
                            </div>
                            <div>
                                <Checkbox defaultChecked>

                                </Checkbox>
                            </div>
                        </div>
                    ))
                }
            </div>
            <Button type='primary' onClick={() => navigate('/Hcy_page1')} block round style={{marginLeft:'0.4762rem',width:'90%'}}>
                立即叫车
            </Button>
        </div>
    )
}
